<!--
  抽屉弹层

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/06 10:14
-->
<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="支付配置"
    :closable="true"
    :body-style="{ padding: 0, paddingBottom: '80px', overflowY: 'overlay' }"
    :drawer-style="{ backgroundColor: '#fff' }"
    width="calc(100% - 100px)"
    @close="vdata.visible = false"
  >
    <div>
      <!-- 当关闭后需要重新渲染 -->
      <JeepayPayConfigPanel v-if="vdata.visible" :infoId="vdata.infoId" :configMode="props.configMode" />
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive, defineExpose } from 'vue'

// 定义父组件的传值
const props = defineProps({
  configMode: { type: String, default: '' }, // 支付接口
})

const vdata = reactive({
  visible: false, // 一级抽屉开关
  infoId: null, // infoId
})

// 弹层打开事件
function show(infoId) {
  vdata.infoId = infoId
  vdata.visible = true
}

defineExpose({ show })
</script>
<style scoped></style>
